<template>
<div class="userdetail">
  <div>
      <img :src="userInfo.user_img" v-if="userInfo.user_img">
      <img src="../../../src/assets/icon/头像.png" v-else>
    <div class="useredit" >
      <div>
        <p>
          <span>200</span>
          <span>粉丝</span>
        </p>
        <p>
          <span>500</span>
          <span>关注</span>
        </p>
        <p>
          <span>1000</span>
          <span>获赞</span>
        </p>
      </div>
      <div @click="$router.push('/edit')">
        编辑资料
      </div>
    </div>
  </div>
  <div>
    <h2>{{userInfo.name}}</h2>
    <p v-if="userInfo.user_desc">{{userInfo.desc}}</p>
    <p v-else>这个人很懒，什么都没有留下。。。。</p>
  </div>
</div>
</template>

<script>
    export default {
        props:[
          'userInfo'
        ]
    }
</script>

<style scoped lang="less">
  .userdetail{
    >div:nth-child(1){
      display: flex;
  }
    >div:nth-child(2){
      h2{
        padding: 2.67vw 0 0.8vw 0;
        font-weight:400;
      }
      p{
        margin: 2.67vw 0;
        color: #999;
      }
    }
    background-color: white;
    padding: 0 12px;
      img{
        height: 22vw;
        width: 22vw;
        border-radius: 50%;
        margin: 0.5vw;
      }
    .useredit{
      flex: 1;
      div:nth-child(1){
        display: flex;
        margin: 2.67vw;
          p{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-size: 3.47vw;
            span:nth-child(2){
              color: #aaa;
            }
          }
        p:nth-child(1),p:nth-child(2){
          border-right: 1px solid #aaa;
        }
      }
      div:nth-child(2){
        border: 2px solid #fb7299;
        padding: 0.8vw;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fb7299;
        border-radius: 2vw;
        margin: 0 5px 0 5.33vw ;
      }
    }
  }
</style>
